<div class="debug-card">
    <form class="debug-form">
        <input type="text" name="endpoint" value="/api/people" />
        <button data-action="read">Get Data</button>
        <button data-action="clear">Clear</button>
    </form>
    <pre>
        <code>{{ config }}</code>
    </pre>
</div>

<style>
    pre {
        white-space: pre-wrap;
    }
</style>

<script>
function getData(endpoint, callback) {
  const request = new XMLHttpRequest();
  request.onreadystatechange = () => {
    if (request.readyState === 4) {
      callback(request.response);
    }
  };
  request.open("GET", endpoint);
  request.send();
}

class DebugForm {
  constructor() {
    this.debugCard = document.querySelector(".debug-card");
    this.form = this.debugCard.querySelector(".debug-form");
    this.clearButton = this.form.querySelector("button[data-action='clear']");
    this.clearButton.addEventListener(
      "click",
      this.handleClearClick.bind(this)
    );
    this.sendButton = this.form.querySelector("button[data-action='read']");
    this.sendButton.addEventListener("click", this.handleSendClick.bind(this));
  }

  handleClearClick(event) {
    event.preventDefault();
    let code = this.debugCard.querySelector("code");
    code.innerText = "";
  }

  handleSendClick(event) {
    event.preventDefault();
    const input = document.querySelector(".debug-card input");
    const endpoint = input.value;
    getData(endpoint, this.showResponse);
  }

  showResponse(data) {
    const debugCard = document.querySelector(".debug-card");
    let code = debugCard.querySelector("code");
    code.innerText = data;
  }
}

new DebugForm();
</script>
